import React,{Component} from 'react';
import styles from './index.scss';
import CSSModules from 'react-css-modules';
import axios from 'axios';
class MyJoin extends Component{
    constructor(props){
        super(props);
        this.state={
            list: []
        }
    }
    componentWillMount(){
        axios({
            url   : 'http://47.92.98.104:8080/zhuiying/getContent?Uid=1',
            method: 'get'
        }).then(res=>{
            this.setState({
                list: res.data
            });
        });
        axios({
            url   : 'http://47.92.98.104:8080/zhuiying/getUser?Uid=1',
            method: 'get'
        }).then(res=>{
            this.refs.comment.innerHTML = res.data.UserName+'的评论'
        });

    }
    showList=()=>{
        var lst    = this.state.list;
        var jsx    = [];
        var lstLen = lst.length;
            for(var i=0;i<lstLen;i++){
                    jsx.push(
                        <li styleName="clearfix" key={i}>
                        <div styleName="com_img"><img src={lst[i].imge}/></div>
                        <div styleName="join_comment">
                            <h4>{lst[i].cname}</h4>
                            <div styleName="join_type"><em>评论：{lst[i].cname}</em></div>
                            <p>{lst[i].content}</p>
                        </div>
                    </li>
                    )
            }
        return jsx;
    }
    render(){
        return(
            <div styleName="details_join subdetails">
                <ul styleName="user_join">
                    <h3 ref="comment">追影小粉的评论</h3>
                    {this.showList()}
                    {/*<li styleName="clearfix">
                        <div styleName="com_img"><img src='/images/user/comment1.png'/></div>
                        <div styleName="join_comment">
                            <h4>玄奘的大爱之路——《西游降魔》</h4>
                            <div styleName="join_type"><span>追影小粉</span><em>评论：西游降魔篇</em></div>
                            <p>剧中主要人物只有两个：陈玄奘（文章饰演）和驱魔人段小姐（舒淇饰演）。其他人都是配角。影片的主要线索就是“寻求大爱”，“降妖”只是一个过程。影片从渔村“降鱼妖”开始到影片最后玄奘在一片绿色中渡化孙悟空，看似很简单，但是很有深度。整个影片能够说是为陈玄奘“悟大爱”而设的一个局。但不得不提的是影片中有一条暗线，就是陈玄奘的师傅，就是那个吃鹅腿的那个胖和尚经常蹲坑处后面墙上的画。</p>
                        </div>
                    </li>*/}
                </ul>
                {/*<ul styleName="user_diary">
                    <h3>追影小粉的日记</h3>
                    <li styleName="clearfix">
                        <h4>为什么说六小龄童不像孙悟空</h4>
                        <div styleName="diary_img"><img src='/images/user/comment1.png'/></div>
                        <div styleName="diary_content">
                            <p>剧中主要人物只有两个：陈玄奘（文章饰演）和驱魔人段小姐（舒淇饰演）。其他人都是配角。影片的主要线索就是“寻求大爱”，“降妖”只是一个过程。影片从渔村“降鱼妖”开始到影片最后玄奘在一片绿色中渡化孙悟空，看似很简单，但是很有深度。整个影片能够说是为陈玄奘“悟大爱”而设的一个局。但不得不提的是影片中有一条暗线，就是陈玄奘的师傅，就是那个吃鹅腿的那个胖和尚经常蹲坑处后面墙上的画。</p>
                            <span>2018-10-15 19: 53: 07</span>
                        </div>
                    </li>
                    <li styleName="clearfix">
                        <h4>为什么说六小龄童不像孙悟空</h4>
                        <div styleName="diary_img"><img src='/images/user/comment1.png'/></div>
                        <div styleName="diary_content">
                            <p>剧中主要人物只有两个：陈玄奘（文章饰演）和驱魔人段小姐（舒淇饰演）。其他人都是配角。影片的主要线索就是“寻求大爱”，“降妖”只是一个过程。影片从渔村“降鱼妖”开始到影片最后玄奘在一片绿色中渡化孙悟空，看似很简单，但是很有深度。整个影片能够说是为陈玄奘“悟大爱”而设的一个局。但不得不提的是影片中有一条暗线，就是陈玄奘的师傅，就是那个吃鹅腿的那个胖和尚经常蹲坑处后面墙上的画。</p>
                            <span>2018-10-15 19: 53: 07</span>
                        </div>
                    </li>
                    <li styleName="clearfix">
                        <h4>为什么说六小龄童不像孙悟空</h4>
                        <div styleName="diary_img"><img src='/images/user/comment1.png'/></div>
                        <div styleName="diary_content">
                            <p>剧中主要人物只有两个：陈玄奘（文章饰演）和驱魔人段小姐（舒淇饰演）。其他人都是配角。影片的主要线索就是“寻求大爱”，“降妖”只是一个过程。影片从渔村“降鱼妖”开始到影片最后玄奘在一片绿色中渡化孙悟空，看似很简单，但是很有深度。整个影片能够说是为陈玄奘“悟大爱”而设的一个局。但不得不提的是影片中有一条暗线，就是陈玄奘的师傅，就是那个吃鹅腿的那个胖和尚经常蹲坑处后面墙上的画。</p>
                            <span>2018-10-15 19: 53: 07</span>
                        </div>
                    </li>
                </ul>*/}
                <ul styleName="user_movies">
                    <h3>推荐电影</h3>
                    <div><p>新片</p>
                        <img src='https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2541019743.webp'/>
                        <img src='https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2532008868.webp'/>
                        <img src='https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529389608.webp'/>
                        <img src='https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2538458306.webp'/>
                        <img src='https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2530279878.webp'/>
                    </div>
                    <div><p>经典</p>
                        <img src='https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.jpg'/>
                        <img src='https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.jpg'/>
                        <img src='https://img3.doubanio.com/view/photo/s_ratio_poster/public/p511118051.jpg'/>
                        <img src='https://img1.doubanio.com/view/photo/s_ratio_poster/public/p510876377.jpg'/>
                        <img src='https://img3.doubanio.com/view/photo/s_ratio_poster/public/p457760035.jpg'/>
                    </div>
                </ul>
            </div>
        )
    }
}
export default CSSModules(MyJoin, styles,{allowMultiple:true});